//size
$size-lg: 1144px;

// App Global Font Size
$html-font-size: 16px;
$font-family: "Inter", sans-serif;

// Colors
$darkest: #0e0e10;
$dark: #131416;
$dark-semi-light: #141416;
$dark-light: #2d2e30;
$dark-gradient: linear-gradient(
  0deg,
  rgba(255, 255, 255, 0.03),
  rgba(255, 255, 255, 0.03)
);
$dark-gradient-static: #262629;
$semi-dark: #212228;
$dark-static: #161617;
$white: #fff;
$white-ghost: rgba(255, 255, 255, 0.05);
$white-light: rgba(255, 255, 255, 0.15);
$primary: #0a9795;
$jade: #0aa292;
$primary-gradient: linear-gradient(92.64deg, $jade 0.31%, #084b9c 129.25%);
$grey: #7b7d82;
$grey-light: #7e8084;
$grey-dark: #28282d;
$red: #eb5757;
$danger: #ff3d48;
$warning: #ffce6d;
$success: #48ff9c;
$black-light: rgba(255, 255, 255, 0.03);
$text-white: rgba(255, 255, 255, 0.8);
$modal-bg: rgba(33, 33, 35, 0.83);
$dropdown-dark: rgba(21, 21, 23, 0.83);
$error-gradient: linear-gradient(0deg, #ff6d6d, #ff6d6d), #131416;
$themes: (
  dark: (
    base: $dark,
    darkest: $darkest,
  ),
);

// Typography
$fw-light: 300;
$fw-normal: 400;
$fw-semi-bold: 500;
$fw-bold: 600;

// Setting for the Typography elements
$fz-xss: 0.5rem !default; // 8px
$fz-xs: 0.75rem !default; // 12px
$fz-sm: 0.8125rem !default; // 13px
$fz-md: 0.875rem !default; // 14px
$fz-base: 1rem !default; // Assumes the browser default, typically `16px`
$fz-lg: 1.125rem !default; // 18px
$fz-llg: 1.5rem !default; // 24px;
$fz-title: 2.25rem !default; // 36px

// Transitions
$transition-1: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
$transition-2: 0.3s ease all;
$transition-3: 2s linear infinite;

// Shadows
$shadow-1: inset -1px 0px 1px rgba(255, 255, 255, 0.08),
  inset 0px 0px 6px rgba(255, 255, 255, 0.06);
$shadow-2: inset -1px 0px 1px rgba(255, 255, 255, 0.04),
  inset 0px 0px 6px rgba(255, 255, 255, 0.03);
$shadow-3: 0px 0px 0px 3px rgba(10, 158, 146, 0.12),
  inset -1px 0px 1px rgba(10, 158, 146, 0.04),
  inset 0px 0px 6px rgba(10, 158, 146, 0.03);
$shadow-4: 0px 4px 4px rgba(0, 0, 0, 0.25);
$shadow-5: inset -1px 0px 1px rgba(255, 255, 255, 0.04),
  inset 0px 0px 6px rgba(255, 255, 255, 0.03);

$blur: blur(17px);
$blur-2: blur(14px);

// App Spacing
$padding-xxs: 0.25rem; // 4px
$padding-xs: 0.5rem; // 8px
$padding-sm: 0.75rem; // 12px
$padding-md: 1rem; // 16px
$padding-lg: 1.125rem; // 18px
$padding-llg: 1.5rem; // 24px
$padding-xl: 2rem; // 32px
$padding-xxl: 2.5rem; // 40px
$padding-max: 4rem; // 64px

// App settings
$app-width: 1376px;
$app-height: 880px;

$br-xxs: 2px;
$br-xs: 4px;
$br-sm: 5px;
$br-md: 9px;
$br-lg: 22px;

$border: 1px solid $semi-dark;
$border-transparent: 1px solid rgba(225, 225, 225, 0.1);
$border-primary: 1px solid rgba(255, 255, 255, 0.07);

$sidebar-width: 234px;
